<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../static/static/css/font.css">
    <link rel="stylesheet" href="../static/static/css/weadmin.css">
    <script src="../static/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="weadmin-body">
    <form class="layui-form" onsubmit="return false;">
        <div class="layui-row">
            <div class="layui-inline">
                <input class="layui-input" placeholder="姓名" name="userName" id="userName">
            </div>
            <div class="layui-inline">
                <input class="layui-input" placeholder="联系方式" name="teleNum" id="teleNum">
            </div>
            <div class="layui-inline">
                <select id="status" name="status" lay-verify="required">
                    <option value="">全部</option>
                    <option value="在职">在职</option>
                    <option value="禁用">禁用</option>
                </select>
            </div>
            <button class="layui-btn" onclick="getNewData()"><i class="layui-icon">&#xe615;</i></button>
            <button class="layui-btn" onclick="WeAdminShow('添加用户','./add.html',600,400)"><i class="layui-icon"></i>添加用户
            </button>
        </div>
    </form>
    <table id="list" lay-filter="test"></table>
</div>
<script>
    var tableIns;
    layui.use('table', function () {
        //执行渲染
        tableIns = layui.table.render({
            elem: '#list'
            ,id: 'list'
            ,page: true
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'userid', title: '编号', width:100}
                ,{field: 'username', title: '姓名', width:200}
                ,{field: 'teleNum', title: '联系方式', width:200}
                ,{field: 'sex', title: '性别', width:100}
                ,{field: 'status', title: '状态', width:100}
                ,{field: 'oppenId', title: '微信识别码', width:300}
                ,{fixed: 'right', align:'center', toolbar: '#bar'}
            ]]
            , toolbar: true
            , url: '/user/getUserList'
            , method: 'post'
            , contentType: 'application/json'
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.infos //解析数据列表
                };
            }
        });

        layui.table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){

            } else if(layEvent === 'del'){

            } else if(layEvent === 'edit'){

            }
        });
    });
    var getNewData = function () {
        tableIns.reload({
            where: {
                username: document.getElementById("userName").value,
                status: document.getElementById("status").value,
                teleNum: document.getElementById("teleNum").value
            }
            ,page: {
                curr: 1
            }
        });
    }
</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">禁用</a>
</script>
</body>
</html>